<template>
  <div class="page-container">
    <!--工具栏-->
    <div class="toolbar" style="float:left;padding-top:10px;padding-left:15px;width: 100%;" >
      <el-steps :active="active" finish-status="success" simple style="margin-top: 20px">
        <el-step title="1、设置促销规则"></el-step>
        <el-step title="2、选择参与商家/店铺"></el-step>
        <el-step title="3、添加活动商品"></el-step>
        <el-step title="4、提交审核"></el-step>
      </el-steps>
      <div v-show="active==1">
        <form class="form-horizontal mgt15">
          <div class="pdL10 border-left font-bold mgB15 ng-binding">基本信息</div>
          <div class="form-group">
            <!--活动名称-->
            <label class="col-sm-2 control-label ng-binding">促销活动名称：</label>
            <!-- <label class="col-sm-2 control-label ng-binding ng-hide" ng-show="promotionDetailContent.promotionType == 13 &amp;&amp; promotionDetailContent.promotionMethod == 17">定金支付时间</label> -->
            <div class="col-sm-10 pdt3px themeTextColor ng-binding">
              <el-input v-model="active11" clearable placeholder="限制在64个字符以内"></el-input>
            </div>
          </div>
          <div class="line line-dashed b-b line-lg ng-scope"></div>
          <div class="form-group">
            <!--活动时间-->
            <label class="col-sm-2 control-label ng-binding">活动时间：</label>
            <!-- <label class="col-sm-2 control-label ng-binding ng-hide" v-show="promotionDetail.promotionType == 13 || promotionDetail.promotionType == 17">定金支付时间</label> -->
            <div class="col-sm-10 pdt3px themeTextColor ng-binding">
              <el-date-picker
                v-model="startTime"
                type="date"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                placeholder="活动开始"
                class="input_postion"
              ></el-date-picker>至
              <el-date-picker
                v-model="endTime"
                type="date"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                placeholder="活动结束"
                class="input_postion"
              ></el-date-picker>
            </div>
          </div>
          <div class="line line-dashed b-b line-lg ng-scope"></div>
          <div class="pdL10 border-left font-bold mgB15 ng-binding">活动规则</div>
          <div class="form-group ng-scope">
            <!--活动类型(促销类型)-->
            <label class="col-sm-2 control-label ng-binding">活动类型：</label>
            <div class="col-sm-10 pdt3px themeTextColor ng-binding">
              <el-radio-group v-model="radio1">
                <el-radio :label="3" class="form-radio">特价促销</el-radio>
                <el-radio :label="6" class="form-radio">折扣促销</el-radio>
                <el-radio :label="9" class="form-radio">直降促销</el-radio>
              </el-radio-group>
            </div>
          </div>
          <div class="line line-dashed b-b line-lg ng-scope"></div>
          <div class="form-group ng-scope" ng-controller="promRuleDescCtrl">
            <label class="col-sm-2 control-label ng-binding">活动描述：</label>
            <div class="col-sm-9">
              <label class="col-sm-1 ng-binding">中文</label>
              <div class="col--sm-4">
                <el-input
                  type="textarea"
                  v-model="active12"
                  class="form-control mgB10 ng-pristine ng-valid"
                  maxlength="100"
                  placeholder="最多输入100个字"
                  show-word-limit
                ></el-input>
              </div>
              <div class="col--sm-12">
                <label class="mgB0 ng-binding">注：非必填字段，不填将显示系统默认文案。自定义输入活动说明后将显示在前台商品详情页中，请认真填写。</label>
                <a
                  href
                  style="color:blue;text-decoration:underline;"
                  data-toggle="modal"
                  data-target="#custom-width-modal-img"
                >
                  <!-- <i class="ng-binding">查看示例</i> -->
                </a>
              </div>
            </div>
          </div>
          <div class="line line-dashed b-b line-lg ng-scope"></div>
          <div class="pdL10 border-left font-bold mgB15 ng-binding ng-scope">交易规则</div>
          <div class="form-group">
            <!--是否支持折上折-->
            <label class="col-sm-2 control-label ng-binding">是否支持折上折：</label>
            <div class="col-sm-10 pdt3px themeTextColor">
              <el-radio-group v-model="radio2">
                <el-radio :label="3" class="form-radio">是</el-radio>
                <el-radio :label="4" class="form-radio">否</el-radio>
              </el-radio-group>
            </div>
            <label class="col-sm-2 control-label ng-binding">（与会员价叠加）</label>
          </div>
          <div class="line line-dashed b-b line-lg ng-scope"></div>
          <div class="form-group">
            <!--是否排斥优惠券-->
            <label class="col-sm-2 control-label ng-binding">是否排斥优惠券：</label>
            <!-- <label class="col-sm-2 control-label ng-binding ng-hide">是否排斥优惠券（尾款支付）</label> -->
            <div class="col-sm-10 pdt3px themeTextColor ng-binding">
              <el-radio-group v-model="radio3">
                <el-radio :label="3" class="form-radio">是</el-radio>
                <el-radio :label="6" class="form-radio">否</el-radio>
              </el-radio-group>
            </div>
          </div>
          <div class="line line-dashed b-b line-lg ng-scope"></div>
          <div class="form-group ng-scope">
            <!--是否包邮-->
            <label class="col-sm-2 control-label ng-binding">是否包邮：</label>
            <!-- <label class="col-sm-2 control-label ng-binding ng-hide" ng-show="promotionDetailContent.promotionType==9">包邮方式</label> -->
            <div class="col-sm-10 pdt3px themeTextColor ng-binding">
              <el-radio-group v-model="radio4">
                <el-radio :label="6" class="form-radio">是</el-radio>
                <el-radio :label="3" class="form-radio">否</el-radio>
              </el-radio-group>
            </div>
          </div>
          <div class="line line-dashed b-b line-lg ng-scope"></div>
          <div class="form-group ng-scope">
            <label class="col-sm-2 control-label ng-binding">超限规则：</label>
            <div class="col-sm-10 pdt3px themeTextColor ng-binding">
              <el-radio-group v-model="radio5">
                <el-radio :label="6" class="form-radio">按原价购买</el-radio>
                <el-radio :label="3" class="form-radio">不可购买</el-radio>
              </el-radio-group>
              <br />
              <label
                class="control-label ng-binding"
              >注：超限规则指用户购买商品数量超过活动可购买数量（通过活动设置的"个人限购数、活动总限购数、每单限购数"计算出）后的购买规则。</label>
            </div>
          </div>
          <div class="line line-dashed b-b line-lg ng-scope"></div>
          <div ng-show="supplierAllocationShow()" class>
            <div class="col-sm-2 control-label">
              <label class="ng-binding">供应商分摊比例：</label>
            </div>
            <div class="mgT10">
              <div class="row mgB10">
                <div class="col-sm-2 m-b-xs">
                  <el-button type="primary" size="mini" @click="querySupplierListForAdd()">选择供应商</el-button>
                  <el-button type="danger" size="mini" @click="delAllSelectedSupplier()">批量删除</el-button>
                </div>
                <span class="col-sm-3 m-b-xs">不选择时默认不分摊，全部有商家或平台承担</span>
              </div>
              <div class="portlet-body flip-scroll" hidden>
                <table
                  class="table-striped table-condensed flip-content ng-hide"
                  ng-show="selectedSupplierList.length>0"
                >
                  <thead>
                  <tr>
                    <th style="width:100px;" class="ng-binding">
                      <label class="i-checks m-b-none">
                        <input
                          type="checkbox"
                          name="selected"
                          ng-click="selectedChkAll()"
                          ng-checked="isSelectedChkAll()"
                        />
                        <i></i>
                      </label>
                      全选
                    </th>
                    <th class="minw80 textCenter">供应商ID</th>
                    <th class="minw80 textCenter">供应商名称</th>
                    <th class="minw80 textCenter">
                      <i class="asterisk">*</i>分摊比例
                    </th>
                  </tr>
                  </thead>
                  <tbody>
                  <!-- ngRepeat: e in selectedSupplierList -->
                  </tbody>
                </table>
              </div>
            </div>
          </div>
          <div class="line line-dashed b-b line-lg ng-scope"></div>
          <div class="pdL10 border-left font-bold mgB15 ng-binding">参与条件</div>
          <div class="line line-dashed b-b line-lg ng-scope"></div>
          <div ng-controller="activitiObjDetailCtrl" class="ng-scope">
            <!--活动渠道-->
            <div
              class="line line-dashed b-b line-lg"
              ng-show="promotionDetailContent.channelCodes.length > 0"
            ></div>
            <div class="form-group ng-scope" ng-if="promotionDetailContent.channelCodes.length > 0">
              <label class="col-sm-2 control-label ng-binding">活动渠道：</label>

              <div class="col-sm-10 pdt3px">
                <el-checkbox
                  :indeterminate="isIndeterminate"
                  v-model="checkAll"
                  @change="handleCheckAllChange"
                >全选</el-checkbox>
                <div style="margin: 15px 0;"></div>
                <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                  <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
                </el-checkbox-group>
              </div>
            </div>

            <div class="line line-dashed b-b line-lg" ng-show="canShowActivityPlatformLimitShow()"></div>
            <div class="form-group ng-scope" ng-if="canShowActivityPlatformLimitShow()">
              <label class="col-sm-2 control-label ng-binding">活动平台：</label>
              <div class="col-sm-10 pdt3px">
                <el-checkbox
                  :indeterminate="isIndeterminate1"
                  v-model="checkAll1"
                  @change="handleCheckAllChange1"
                >全选</el-checkbox>
                <div style="margin: 15px 0;"></div>
                <el-checkbox-group v-model="checkedCities1" @change="handleCheckedCitiesChange1">
                  <el-checkbox v-for="city in cities1" :label="city" :key="city">{{city}}</el-checkbox>
                </el-checkbox-group>
              </div>
            </div>

            <div class="line line-dashed b-b line-lg"></div>
            <div class="form-group">
              <label class="col-sm-2 control-label ng-binding">新老用户：</label>
              <div class="col-sm-10 pdt3px">
                <el-checkbox
                  :indeterminate="isIndeterminate2"
                  v-model="checkAll2"
                  @change="handleCheckAllChange2"
                >全选</el-checkbox>
                <div style="margin: 15px 0;"></div>
                <el-checkbox-group v-model="checkedCities2" @change="handleCheckedCitiesChange2">
                  <el-checkbox v-for="city in cities2" :label="city" :key="city">{{city}}</el-checkbox>
                </el-checkbox-group>
              </div>
            </div>
            <div class="line line-dashed b-b line-lg"></div>
            <div class="form-group">
              <label class="col-sm-2 control-label ng-binding">会员类型</label>
              <div class="col-sm-10 pdt3px">
                <el-checkbox
                  :indeterminate="isIndeterminate3"
                  v-model="checkAll3"
                  @change="handleCheckAllChange3"
                >全选</el-checkbox>
                <div style="margin: 15px 0;"></div>
                <el-checkbox-group v-model="checkedCities3" @change="handleCheckedCitiesChange3">
                  <el-checkbox v-for="city in cities3" :label="city" :key="city">{{city}}</el-checkbox>
                </el-checkbox-group>
              </div>
            </div>
            <!-- 会员等级(修改) -->
            <div class="line line-dashed b-b line-lg"></div>
            <div class="form-group">
              <div ng-repeat="e in memberLevelArray" class="ng-scope">
                <label class="col-sm-2 control-label ng-binding ng-scope" ng-if="$index==0">会员等级:</label>
                <div class="col-sm-10 pdt3px">
                  <el-checkbox
                    :indeterminate="isIndeterminate4"
                    v-model="checkAll4"
                    @change="handleCheckAllChange4"
                  >全选</el-checkbox>
                  <div style="margin: 15px 0;"></div>
                  <el-checkbox-group v-model="checkedCities4" @change="handleCheckedCitiesChange4">
                    <el-checkbox v-for="city in cities4" :label="city" :key="city">{{city}}</el-checkbox>
                  </el-checkbox-group>
                </div>
              </div>
            </div>
            <div class="line line-dashed b-b line-lg"></div>
            <div class="form-group ng-scope" ng-if="promotionDetailContent.promotionType != 12">
              <!--备注-->
              <label class="col-sm-2 control-label ng-binding">备注：</label>
              <div class="col-sm-10 pdt3px themeTextColor">
                <quill-editor
                  v-model="content"
                  ref="myQuillEditor"
                  style="height: 300px;"
                  :options="editorOption"
                ></quill-editor>
              </div>
            </div>
          </div>
        </form>
      </div>
      <div class="tab-container" v-show="active == 2">
        <el-tabs type="border-card" style="margin-top: 15px;">
          <el-tab-pane label="商家">
            <div style="float: left;margin-bottom: 10px;">
              <el-button type="primary" size="mini" @click="querySupplierListForAdd()">添加商家</el-button>
              <el-button type="danger" size="mini" @click="delAllSelectedSupplier()">批量删除</el-button>
            </div>
            <el-table :data="businessList" border style="width: 100%">
              <el-table-column prop="id" label="商品编码"></el-table-column>
              <el-table-column prop="name" label="商家名称"></el-table-column>
              <el-table-column prop="type" label="组织分类"></el-table-column>
              <el-table-column prop="type" label="操作"></el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="店铺">
            <div style="float: left;margin-bottom: 10px;">
              <el-button type="primary" size="mini" @click="querySupplierListForAdd2()">添加店铺</el-button>
              <el-button type="danger" size="mini" @click="delAllSelectedSupplier()">批量删除</el-button>
            </div>
            <el-table :data="shopList" border style="width: 100%">
              <el-table-column prop="id" label="店铺编码"></el-table-column>
              <el-table-column prop="name" label="店铺名称"></el-table-column>
              <el-table-column prop="type" label="店铺类型"></el-table-column>
              <el-table-column prop="type" label="操作"></el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="tab-container" v-show="active == 3">
        <el-tabs type="border-card">
          <div style=" height: 40px;">
            <el-button
              size="mini"
              style="float: left;"
              type="primary"
              @click="productSelectionModal()"
            >添加追加商品</el-button
            >
            <el-button
              size="mini"
              style="float: left;"
              type="danger"
              v-show="modalShow == 1"
              @click="delMerchantProducts()"
            >批量删除</el-button
            >
            <el-button
              size="mini"
              style="float: left;"
              type="primary"
              v-show="modalShow == 2"
              @click="batchReAdd()"
            >批量重新添加</el-button
            >
            <el-button-group style="float:right;">
              <el-button size="mini" @click="importCommodityModal(1)"
              >模板下载<i class="el-icon-download el-icon--right"></i
              ></el-button>
              <el-button size="mini" @click="importCommodityModal(2)"
              >商品导入<i class="el-icon-upload el-icon--right"></i
              ></el-button>
            </el-button-group>
          </div>
          <el-tabs
            type="border-card"
            v-model="activeName"
            @tab-click="handleClick">
            <el-tab-pane label="生效商品(1)" name="0">
              <div>
                <div style="margin-bottom: 10px;float: right;">
                  <el-button-group>
                    <el-button
                      size="mini"
                      style="float: left;"
                      type="info"
                      icon="el-icon-edit"
                      @click="showBatchSetUp()"
                    >批量设置</el-button
                    >
                    <el-button
                      size="mini"
                      style="float: left;"
                      type="info"
                      icon="el-icon-search"
                      @click="showQueryCondition()"
                    >搜索</el-button
                    >
                  </el-button-group>
                </div>
                <div>
                  <div
                    style="padding-top: 40px;padding-bottom: 20px;"
                    v-show="setUp"
                  >
                    <el-form :model="dataForm" :inline="true">
                      <el-form-item label="商品品牌">
                        <el-input
                          v-model="dataForm.key"
                          auto-complete="off"
                        ></el-input>
                      </el-form-item>
                      <el-form-item label="商品品牌">
                        <el-input
                          v-model="dataForm.key"
                          auto-complete="off"
                        ></el-input>
                      </el-form-item>
                      <el-form-item label="商品品牌">
                        <el-input
                          v-model="dataForm.key"
                          auto-complete="off"
                        ></el-input>
                      </el-form-item>
                      <el-form-item label="商品品牌">
                        <el-input
                          v-model="dataForm.key"
                          auto-complete="off"
                        ></el-input>
                      </el-form-item>
                      <el-form-item label="商品品牌">
                        <el-input
                          v-model="dataForm.key"
                          auto-complete="off"
                        ></el-input>
                      </el-form-item>
                    </el-form>
                    <div
                      style="margin-bottom: 20px;float: right;margin-right: 13.8%;"
                    >
                      <el-button
                        size="mini"
                        style="float: left;"
                        type="primary"
                        @click="batchReAdd()"
                      >保存</el-button
                      >
                    </div>
                  </div>
                  <div
                    style="padding-top: 40px;padding-bottom: 20px;"
                    v-show="search"
                  >
                    <el-form :model="dataForm" :inline="true">
                      <el-form-item label="商家">
                        <el-input
                          v-model="dataForm.key"
                          auto-complete="off"
                        ></el-input>
                      </el-form-item>
                      <el-form-item label="商品编号">
                        <el-input
                          v-model="dataForm.key"
                          auto-complete="off"
                        ></el-input>
                      </el-form-item>
                      <el-form-item label="商品名称">
                        <el-input
                          v-model="dataForm.key"
                          auto-complete="off"
                        ></el-input>
                      </el-form-item>
                      <el-form-item label="商品条码">
                        <el-input
                          v-model="dataForm.key"
                          auto-complete="off"
                        ></el-input>
                      </el-form-item>
                    </el-form>
                    <div
                      style="margin-bottom: 20px;float: right;margin-right: 13.8%;"
                    >
                      <el-button
                        size="mini"
                        style="float: left;"
                        type="primary"
                        @click="batchReAdd()"
                      >查询</el-button
                      >
                      <el-button
                        size="mini"
                        style="float: left;"
                        type="primary"
                        @click="batchReAdd()"
                      >重置</el-button
                      >
                    </div>
                  </div>
                </div>
              </div>
              <div>
                <el-table
                  :data="tableData"
                  border
                  style="width: 100%"
                  @selection-change="handleSelectionChange"
                >
                  <el-table-column
                    type="selection"
                    width="55"
                  ></el-table-column>
                  <el-table-column
                    prop="id"
                    label="商品编号"
                    width="180"
                  ></el-table-column>
                  <el-table-column
                    prop="productName"
                    label="商品名称"
                    width="180"
                  ></el-table-column>
                  <el-table-column
                    prop="address"
                    label="商品条码"
                  ></el-table-column>
                  <el-table-column
                    prop="unit"
                    label="计量单位"
                  ></el-table-column>
                  <el-table-column
                    prop="shopName"
                    label="商家名称"
                  ></el-table-column>
                  <el-table-column
                    prop="price"
                    label="统一零售价（元）"
                  ></el-table-column>
                  <el-table-column
                    prop="markdown"
                    label="直降（元）"
                  ></el-table-column>
                  <el-table-column
                    prop="shopLimit1"
                    label="商家单渠道限购"
                  ></el-table-column>
                  <el-table-column
                    prop="shopLimit2"
                    label="店铺单渠道限购"
                  ></el-table-column>
                  <el-table-column
                    prop="shopLimit3"
                    label="个人单渠道限购"
                  ></el-table-column>
                  <el-table-column
                    prop="address"
                    label="订单限购"
                  ></el-table-column>
                </el-table>
              </div>
              <div style="margin-top: 10px;">
                <el-button
                  size="mini"
                  type="primary"
                  @click="updatePriceAndLimit()"
                >确认添加</el-button
                >
              </div>
            </el-tab-pane>
            <el-tab-pane label="互斥商品(0)" name="1">
              <el-table
                border
                style="width: 100%"
                @selection-change="repelSelectionChange"
              >
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column
                  prop="id"
                  label="商品编号"
                  width="180"
                ></el-table-column>
                <el-table-column
                  prop="productName"
                  label="商品名称"
                  width="180"
                ></el-table-column>
                <el-table-column
                  prop="address"
                  label="商品条码"
                ></el-table-column>
                <el-table-column prop="unit" label="计量单位"></el-table-column>
                <el-table-column
                  prop="shopName"
                  label="商家名称"
                ></el-table-column>
                <el-table-column
                  prop="price"
                  label="互斥记录时间"
                ></el-table-column>
                <el-table-column prop="markdown" label="操作"></el-table-column>
              </el-table>
              <div style="margin-top: 10px;">
                <el-button
                  size="mini"
                  type="primary"
                  @click="promotionPriceCheckAndSubmit()"
                >确认添加</el-button
                >
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-tabs>
      </div>
      <div class="tab-container" v-show="active == 4">
        <div  style="font-size:25px;text-align: center;margin-top: 27px;">
          <el-alert title="等待审核,审核通过后立即生效" type="success" center ></el-alert>
        </div>
      </div>
    </div>
    <!--下一步-->
    <div>
      <el-button type="primary" style="margin-top: 60px;margin-bottom: 60px;" v-if="active == 2 || active == 3" @click="upStep">上一步</el-button>
      <el-button type="primary" style="margin-top: 60px;margin-bottom: 60px;" @click="next">下一步</el-button>
    </div>
    <!--添加商家-->
    <el-dialog :title="'添加商家'" width="40%" :visible.sync="editDialogVisible" :close-on-click-modal="false" >
      <!--工具栏-->
      <div class="toolbar" style="float:left;padding-top:10px;padding-left:15px;">
        <el-form :inline="true" :model="filters1">
          <el-row class="search-input">
             <el-form-item label="供应商编码：">
            <el-input v-model="filters1.code" placeholder="供应商编码" clearable/>
          </el-form-item>
          <el-form-item label="供应商名称：">
            <el-input v-model="filters1.name" placeholder="供应商名称" clearable/>
          </el-form-item>
          </el-row>
          <!-- 按钮 -->
          <el-row class="search-button">
             <el-form-item>
            <kt-button
              icon="fa fa-search"
              :label="$t('action.search')"
              type="primary"/>
          </el-form-item>
          <el-form-item>
            <kt-button icon="fa fa-refresh" :label="$t('action.reset')" type="primary" @click="resetForm('filters1')"/>
          </el-form-item>
          </el-row>
        </el-form>
      </div>
      <!-- 列表查询-->
      <el-table :data="tableData"
                :size="size"
                :align="align"
                style="width:100%;"
                ref="multipleTable"
                :default-sort = "{prop: 'code,status,deliveryMethod', order: 'descending'}"
                :header-cell-style="{ 'color': '#FFF','background-color': '#2F4554'}">
        <el-table-column type="selection" label="操作" width="80">

        </el-table-column>
        <el-table-column prop="code" label="供应商编码" sortable></el-table-column>
        <el-table-column prop="deliveryMethod" label="供应商名称" sortable></el-table-column>
      </el-table>
      <div class="toolbar" style="padding:10px;">
        <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          :current-page="pageRequest.pageNum"
          :page-size="pageRequest.pageSize"
          :total="4"
          style="float:right;"
          :page-sizes="[10, 20, 30, 40]"></el-pagination>
      </div>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click.native="editDialogVisible = false">取消</el-button>
        <el-button :size="size"  type="primary"  @click.native="editDialogVisible = false">确定</el-button>
      </div>
    </el-dialog>
    <!-- 添加参与店铺-->
    <el-dialog :title="'添加参与店铺'" width="40%" :visible.sync="editDialogVisible2" :close-on-click-modal="false" >
      <div class="toolbar" style="float:left;padding-top:10px;padding-left:15px;">
        <el-form :inline="true" :model="filters2" label-width="120px">
           <el-row class="search-input">
               <el-form-item label="所属商家编码：">
            <el-input v-model="filters2.name1" placeholder="所属商家编码" clearable/>
          </el-form-item>
          <el-form-item label="所属商家名称：">
            <el-input v-model="filters2.name2" placeholder="所属商家名称" clearable/>
          </el-form-item>
          <el-form-item label="店铺编码：">
            <el-input v-model="filters2.name3" placeholder="店铺编码" clearable/>
          </el-form-item>
          <el-form-item label="店铺名称：">
            <el-input v-model="filters2.name4" placeholder="店铺名称" clearable/>
          </el-form-item>
           </el-row>
          <!-- 按钮 -->
           <el-row class="search-button">
               <el-form-item>
            <kt-button
              icon="fa fa-search"
              :label="$t('action.search')"
              type="primary"/>
          </el-form-item>
          <el-form-item>
            <kt-button icon="fa fa-refresh" :label="$t('action.reset')" type="primary" @click="resetForm1('filters2')"/>
          </el-form-item>
           </el-row>
        </el-form>
      </div>
      <!-- 列表查询-->
      <el-table :data="tableData1"
                :size="size"
                :align="align"
                style="width:100%;"
                ref="multipleTable"
                :default-sort = "{prop: 'name1', order: 'descending'}"
                :header-cell-style="{ 'color': '#FFF','background-color': '#2F4554'}">
        <el-table-column type="selection" label="操作" width="80"></el-table-column>
        <el-table-column prop="name1" label="店铺编码" sortable></el-table-column>
        <el-table-column prop="name2" label="店铺名称" sortable></el-table-column>
        <el-table-column prop="name3" label="所属商家" sortable></el-table-column>
      </el-table>
      <div class="toolbar" style="padding:10px;">
        <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          :current-page="pageRequest.pageNum"
          :page-size="pageRequest.pageSize"
          :total="0"
          style="float:right;"
          :page-sizes="[10, 20, 30, 40]"></el-pagination>
      </div>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click.native="editDialogVisible2 = false">取消</el-button>
        <el-button :size="size"  type="primary"  @click.native="editDialogVisible2 = false">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="'添加参与店铺'" width="40%" :visible.sync="editDialogVisible2" :close-on-click-modal="false" >
      <div class="toolbar" style="float:left;padding-top:10px;padding-left:15px;">
        <el-form :inline="true" :model="filters2" label-width="120px">
          <el-row class="search-input">
              <el-form-item label="所属商家编码：">
            <el-input v-model="filters2.name1" placeholder="所属商家编码" clearable/>
          </el-form-item>
          <el-form-item label="所属商家名称：">
            <el-input v-model="filters2.name2" placeholder="所属商家名称" clearable/>
          </el-form-item>
          <el-form-item label="店铺编码：">
            <el-input v-model="filters2.name3" placeholder="店铺编码" clearable/>
          </el-form-item>
          <el-form-item label="店铺名称：">
            <el-input v-model="filters2.name4" placeholder="店铺名称" clearable/>
          </el-form-item>
          </el-row>
          <!-- 按钮 -->
          <el-row class="search-button">
              <el-form-item>
            <kt-button
              icon="fa fa-search"
              :label="$t('action.search')"
              type="primary"/>
          </el-form-item>
          <el-form-item>
            <kt-button icon="fa fa-refresh" :label="$t('action.reset')" type="primary" @click="resetForm1('filters2')"/>
          </el-form-item>
          </el-row>
        </el-form>
      </div>
      <!-- 列表查询-->
      <el-table :data="tableData1"
                :size="size"
                :align="align"
                style="width:100%;"
                ref="multipleTable"
                :default-sort = "{prop: 'name1', order: 'descending'}"
                :header-cell-style="{ 'color': '#FFF','background-color': '#2F4554'}">
        <el-table-column type="selection" label="操作" width="80"></el-table-column>
        <el-table-column prop="name1" label="店铺编码" sortable></el-table-column>
        <el-table-column prop="name2" label="店铺名称" sortable></el-table-column>
        <el-table-column prop="name3" label="所属商家" sortable></el-table-column>
      </el-table>
      <div class="toolbar" style="padding:10px;">
        <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          :current-page="pageRequest.pageNum"
          :page-size="pageRequest.pageSize"
          :total="0"
          style="float:right;"
          :page-sizes="[10, 20, 30, 40]"></el-pagination>
      </div>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click.native="editDialogVisible2 = false">取消</el-button>
        <el-button :size="size"  type="primary"  @click.native="editDialogVisible2 = false">确定</el-button>
      </div>
    </el-dialog>
    <!-- 导入、上传弹窗-->
    <el-dialog
      :title="operation ? '商品导入' : '下载模板'"
      :inline="true"
      width="20%"
      :visible.sync="uploadVisible"
      :close-on-click-modal="false"
    >
      <div style="padding-top: 15px;">
        <el-button type="primary" icon="el-icon-download" v-show="operation"
        >商品导入模板</el-button
        >
        <el-button
          type="primary"
          icon="el-icon-upload"
          v-show="operation == false"
        >商品导入</el-button
        >
      </div>
    </el-dialog>
    <!--新增编辑界面-->
    <el-dialog
      :title="'添加商品'"
      :inline="true"
      width="65%"
      :visible.sync="productVisible"
      :close-on-click-modal="false"
    >
      <div>
        <el-form
          :model="dataForm"
          label-width="120px"
          ref="dataForm"
          :size="size"
        >
        <el-row class="search-input">
          <!-- <div class="col-sm-9"> -->
            <el-form-item label="商品名称：">
              <el-input v-model="dataForm.key" auto-complete="off" placeholder="请输入商品名称"></el-input>
            </el-form-item>
          <!-- </div> -->
          <!-- <div class="col-sm-9"> -->
            <el-form-item label="商品编码：">
              <el-input v-model="dataForm.key" auto-complete="off" placeholder="请输入商品编码"></el-input>
            </el-form-item>
          <!-- </div> -->
          <!-- <div class="col-sm-9"> -->
            <el-form-item label="商品条码：">
              <el-input v-model="dataForm.key" auto-complete="off" placeholder="请输入商品条码"></el-input>
            </el-form-item>
          <!-- </div> -->
          <!-- <div class="col-sm-9"> -->
            <el-form-item label="商品类目：">
              <el-input v-model="dataForm.key" auto-complete="off" placeholder="请输入商品类目"></el-input>
            </el-form-item>
          <!-- </div> -->
          <!-- <div class="col-sm-9"> -->
            <el-form-item label="商品品牌：">
              <el-input v-model="dataForm.key" auto-complete="off" placeholder="请输入商品品牌"></el-input>
            </el-form-item>
          <!-- </div> -->
          <!-- <div class="col-sm-9"> -->
            <el-form-item label="商家名称：">
              <el-input v-model="dataForm.key" auto-complete="off" placeholder="请输入商家名称"></el-input>
            </el-form-item>
          <!-- </div> -->
          </el-row>
        </el-form>
      </div>
      <div style="padding-top: 45px;">
        <el-table
          :data="tableData1"
          border
          style="width: 100%"
          @selection-change="addSelectionChange"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column
            prop="id"
            label="商品编码"
            width="180"
          ></el-table-column>
          <el-table-column
            prop="productName"
            label="商品名称"
            width="180"
          ></el-table-column>
          <el-table-column prop="address" label="商品条码"></el-table-column>
          <el-table-column prop="unit" label="计量单位"></el-table-column>
          <el-table-column prop="shopName" label="商品品牌"></el-table-column>
          <el-table-column prop="price" label="商品类目"></el-table-column>
          <el-table-column
            prop="markdown"
            label="所属商家名称"
          ></el-table-column>
        </el-table>
      </div>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click.native="productVisible = false"
        >取消</el-button
        >
        <el-button
          :size="size"
          type="primary"
          @click.native="submitForm"
          :loading="editLoading"
        >确定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import KtButton from "@/views/Core/KtButton";
  import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
  import { quillEditor } from "vue-quill-editor";
  import "quill/dist/quill.core.css";
  import "quill/dist/quill.snow.css";
  import "quill/dist/quill.bubble.css";
  const channelArr = ["bbc"];
  const channelArr1 = ["APP端", "PC端", "微信"];
  const channelArr2 = ["新用户", "老用户"];
  const channelArr3 = ["普通会员"];
  const channelArr4 = ["注册用户", "VIP会员", "金卡"];
  export default {
    name: "Tab",
    components: {
      KtButton,
      TableColumnFilterDialog,
      quillEditor
    },
    props: {
      align: {
        // 文本对齐方式
        type: String,
        default: "left"
      }
    },
    data() {
      return {
        size: 'small',
        modalShow: 1,
        activeName: 0,
        setUp: false,
        search: false,
        dataForm: {},
        productVisible: false,
        editLoading: false,
        operation: false, // true:商品导入, false:下载模板
        uploadVisible: false,
        editDialogVisible: false,
        editDialogVisible2: false,
        url: './static/shop.png',
        url2: './static/shop2.png',
        content: null,
        editorOption: {},
        active: 1,
        active11: null,
        active12: null,
        active13: null,
        radio1: 3,
        radio2: 3,
        radio3: 3,
        radio4: 3,
        radio5: 3,
        filters: [],
        businessList: [{ id: "001", name: "张小二服饰", type: "自营商家" }],
        shopList: [{ id: "161616", name: "张小二bbc店铺", type: "直营" }],
        checkAll: false,
        checkAll1: false,
        checkAll2: false,
        checkAll3: false,
        checkAll4: false,
        checkedCities: ["bbc"],
        checkedCities1: ["APP端", "PC端", "微信"],
        checkedCities2: ["新用户", "老用户"],
        checkedCities3: ["普通会员"],
        checkedCities4: ["注册用户", "VIP会员", "金卡"],
        cities: channelArr,
        cities1: channelArr1,
        cities2: channelArr2,
        cities3: channelArr3,
        cities4: channelArr4,
        isIndeterminate: true,
        isIndeterminate1: true,
        isIndeterminate2: true,
        isIndeterminate3: true,
        isIndeterminate4: true,
        filters1: {
          code: "",
          name: "",
        },
        endTime: "",
        startTime: "",
        filters2: {
          name: "",
          name1: "",
          name2: "",
          name3: ""
        },
        multipleSelection: [],
        tableData: [{
          code: '1909160000172422',
          deliveryMethod: 'A供应商'
        }, {
          code: '1909170000040390',
          deliveryMethod: 'B供应商'
        }, {
          code: '1909200000093319',
          deliveryMethod: 'C供应商'
        }, {
          code: '1909220000080872',
          deliveryMethod: 'D供应商'
        }],
        tableData1: [{
          name1: "",
          name2: "",
          name3: "",
          name4: ""}],
        pageRequest: {
          pageNum: 1,
          pageSize: 10
        }
      };
    },
    methods: {
      //添加商品弹窗
      addSelectionChange(val) {
        this.addSelection = val;
      },
      showBatchSetUp() {
        if (this.search == true) {
          this.search = false;
        }
        if (this.setUp == false) {
          this.setUp = true;
        } else if (this.setUp == true) {
          this.setUp = false;
        }
      },
      showQueryCondition() {
        if (this.setUp == true) {
          this.setUp = false;
        }
        if (this.search == false) {
          this.search = true;
        } else if (this.search == true) {
          this.search = false;
        }
      },
      batchReAdd() {
        if (this.multipleSelection.length < 1) {
          this.$message({ message: "请选择要设置的商品", type: "error" });
          return false;
        }
        this.$message({ message: "操作成功", type: "success" });
      },
      updatePriceAndLimit() {},
      importCommodityModal(val) {
        if (val === 1) {
          this.operation = true;
        } else if (val == 2) {
          this.operation = false;
        }
        this.uploadVisible = true;
      },
      productSelectionModal() {
        this.productVisible = true;
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleClick(tab, event) {
        console.log(tab, event);
        if (tab.name == "0") {
          // 触发‘配置管理’事件
          this.first();
        } else {
          // 触发‘用户管理’事件
          this.second();
        }
      },
      repelSelectionChange(val) {
        this.repelSelection = val;
      },
      first() {
        console.log("生效商品");
        this.modalShow = 1;
      },
      second() {
        console.log("互斥商品");
        this.modalShow = 2;
      },

      handleCheckAllChange(val) {
        this.checkedCities = val ? channelArr : [];
        this.isIndeterminate = false;
      },
      handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.cities.length;
        this.isIndeterminate =
          checkedCount > 0 && checkedCount < this.cities.length;
      },
      handleCheckAllChange1(val) {
        this.checkedCities1 = val ? channelArr1 : [];
        this.isIndeterminate1 = false;
      },
      handleCheckedCitiesChange1(value) {
        let checkedCount = value.length;
        this.checkAll1 = checkedCount === this.cities1.length;
        this.isIndeterminate1 =
          checkedCount > 0 && checkedCount < this.cities1.length;
      },
      handleCheckAllChange2(val) {
        this.checkedCities2 = val ? channelArr2 : [];
        this.isIndeterminate2 = false;
      },
      handleCheckedCitiesChange2(value) {
        let checkedCount = value.length;
        this.checkAll2 = checkedCount === this.cities2.length;
        this.isIndeterminate2 =
          checkedCount > 0 && checkedCount < this.cities2.length;
      },
      handleCheckAllChange3(val) {
        this.checkedCities3 = val ? channelArr3 : [];
        this.isIndeterminate3 = false;
      },
      handleCheckedCitiesChange3(value) {
        let checkedCount = value.length;
        this.checkAll3 = checkedCount === this.cities3.length;
        this.isIndeterminate3 =
          checkedCount > 0 && checkedCount < this.cities3.length;
      },
      handleCheckAllChange4(val) {
        this.checkedCities4 = val ? channelArr4 : [];
        this.isIndeterminate4 = false;
      },
      handleCheckedCitiesChange4(value) {
        let checkedCount = value.length;
        this.checkAll4 = checkedCount === this.cities4.length;
        this.isIndeterminate4 =
          checkedCount > 0 && checkedCount < this.cities4.length;
      },
      querySupplierListForAdd() {
        this.editDialogVisible = true;

      },
      querySupplierListForAdd2() {
        this.editDialogVisible2 = true;
      },
      delAllSelectedSupplier() {},
      next() {
        if (this.active11 === null || this.active12 === null) {
          this.$message({message: "不允许有空值", type: "warning"});
          return;
        }
        if (this.active == 4) {
          this.$message({message: "操作成功", type: "success"});
          return;
        }
        if (this.active++ > 3) this.active = 1;
      },
      upStep() {
        if (this.active === 2) {
          this.active = 1;
        } else if (this.active === 3) {
          this.active = 2;
        }
      },
      resetForm(formName) {
        this.filters1 = {
          code: "",
          name: ""
        }
      },
      resetForm1(formName) {
        this.filters2 = {
          name1: "",
          name2: "",
          name3: "",
          name4: ""
        }
      },
    },
    created() {
      this.startTime = this.$route.params.code.startTime;
      this.endTime = this.$route.params.code.endTime;
      this.active11 = this.$route.params.code.title;
      this.active12 = this.$route.params.code.title;
    }
  };
</script>

<style scoped>
  .pdL10 {
    padding-left: 10px !important;
  }
  .mgB15 {
    margin-bottom: 15px !important;
  }
  .border-left {
    border-left: 3px #ddd solid !important;
  }
  .font-bold {
    font-weight: 700;
  }
  .form-group {
    margin-bottom: 15px !important;
    margin-right: -0px !important;
    margin-left: -0px !important;
  }
  .form-horizontal .control-label {
    padding-top: 5px;
    margin-bottom: 0;
    text-align: right;
  }
  .form-horizontal div {
    font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif,
    "Regular", "Microsoft YaHei";
    font-size: 12px;
    color: #666666;
    background-color: transparent;
    -webkit-font-smoothing: antialiased;
    line-height: 1.42857143;
    word-wrap: break-word;
  }
  .form-horizontal .control-label {
    padding-top: 3px !important;
  }
  .col-sm-2 {
    width: 16.66666667%;
  }
  /* .col-sm-10 {
      width: 83.33333333%;
  } */
  .col-sm-1,
  .col-sm-2,
  .col-sm-3,
  .col-sm-4,
  .col-sm-5,
  .col-sm-6,
  .col-sm-7,
  .col-sm-8,
  .col-sm-9,
  .col-sm-10,
  .col-sm-11,
  .col-sm-12 {
    float: left;
  }
  .col-xs-1,
  .col-sm-1,
  .col-md-1,
  .col-lg-1,
  .col-xs-2,
  .col-sm-2,
  .col-md-2,
  .col-lg-2,
  .col-xs-3,
  .col-sm-3,
  .col-md-3,
  .col-lg-3,
  .col-xs-4,
  .col-sm-4,
  .col-md-4,
  .col-lg-4,
  .col-xs-5,
  .col-sm-5,
  .col-md-5,
  .col-lg-5,
  .col-xs-6,
  .col-sm-6,
  .col-md-6,
  .col-lg-6,
  .col-xs-7,
  .col-sm-7,
  .col-md-7,
  .col-lg-7,
  .col-xs-8,
  .col-sm-8,
  .col-md-8,
  .col-lg-8,
  .col-xs-9,
  .col-sm-9,
  .col-md-9,
  .col-lg-9,
  .col-xs-10,
  .col-sm-10,
  .col-md-10,
  .col-lg-10,
  .col-xs-11,
  .col-sm-11,
  .col-md-11,
  .col-lg-11,
  .col-xs-12,
  .col-sm-12,
  .col-md-12,
  .col-lg-12 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
  }
  label {
    font-weight: normal;
  }
  label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: bold;
  }
  .form-group .pdt3px {
    padding-top: 3px;
  }
  .b-b {
    border-bottom: 1px solid #dddddd;
  }
  .line-dashed {
    border-style: dashed !important;
    background-color: transparent;
    border-width: 0;
  }
  .line-lg {
    margin-top: 15px;
    margin-bottom: 15px;
  }
  .line {
    width: 100%;
    height: 2px;
    margin: 10px 0;
    font-size: 0;
    overflow: hidden;
  }
  table {
    background-color: transparent;
  }
  table {
    border-spacing: 0;
    border-collapse: collapse;
  }
  .i-checks {
    padding-left: 0;
    margin-right: 15px;
    cursor: pointer;
    color: #666666;
  }
  .radio-inline,
  .checkbox-inline {
    display: inline-block;
    padding-left: 20px;
    margin-bottom: 0;
    font-weight: normal;
    vertical-align: middle;
    cursor: pointer;
  }
  .panel-body tr {
    padding: 0 15px;
  }
  .mgt15 {
    margin-top: 15px;
  }
  .search-button{
    border: none;
  }
</style>
